<div id="account-overview" v-cloak>
  <div class="container">
    <h1>My account</h1>
    <hr/>
    <div class="row mb-3">
      <div class="col-sm-6">
        <h4>Personal information</h4>
      </div>
      <div class="col-sm-6">
        <span class="float-sm-right">
          <a class="btn btn-sm btn-outline-info account-settings-button" href="/account/profile">Edit profile</a>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="col-3">Name:</div>
      <div class="col"><strong>{{me.fullName}}</strong></div>
    </div>
    <div class="row">
      <div class="col-3">Email:</div>
      <div class="col">
        <strong :class="[me.emailStatus === 'unconfirmed' || me.emailStatus === 'change-requested' ? 'text-muted' : '']">{{me.emailChangeCandidate ? me.emailChangeCandidate : me.emailAddress}}</strong>
        <span v-if="me.emailStatus === 'unconfirmed' || me.emailStatus === 'change-requested'" class="badge badge-pill badge-warning">Unverified</span>
      </div>
    </div>
    <hr/>
    <div class="row mb-3">
      <div class="col-sm-6">
        <h4>Password</h4>
      </div>
      <div class="col-sm-6">
        <span class="float-sm-right">
          <a class="btn btn-sm btn-outline-info account-settings-button" href="/account/password">Change password</a>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="col-3">Password:</div>
      <div class="col"><strong>••••••••••</strong></div>
    </div>
    <hr/>

    
  </div>

</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
